@import "./reset";

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eeeeee;
  .row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 64px;
    .arrow {
      width: 50px;
      height: 50px;
      background: #000000;
      position: relative;
      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 4px;
        background: #ffffff;
        left: 0;
        border-radius: 25px;
        transition: 300ms;
      }
      $angle: 30deg;
      $angleHover: $angle - 10deg;
      $spacing: 11px;
      $spacingHover: 15px;
      &::before {
        top: $spacing;
        transform: rotate(-$angle);
      }
      &::after {
        bottom: $spacing;
        transform: rotate($angle);
      }
      &:hover {
        &::before {
          top: $spacingHover;
          transform: rotate(-$angleHover);
        }
        &::after {
          bottom: $spacingHover;
          transform: rotate($angleHover);
        }
      }
      &.right {
        &::before {
          top: $spacing;
          transform: rotate($angle + 180deg);
        }
        &::after {
          bottom: $spacing;
          transform: rotate(-($angle + 180deg));
        }
        &:hover {
          &::before {
            top: $spacingHover;
            transform: rotate($angleHover + 180deg);
          }
          &::after {
            bottom: $spacingHover;
            transform: rotate(-($angleHover + 180deg));
          }
        }
      }
    }
  }
}
